<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
.menu{
	width:200px;/*设置元素宽度*/
	list-style:none;/*设置列表无样式*/
	position:fixed;/*设置定位属性*/
	top:30px;
	left:20px;
}
.menu li{
	margin-top:10px;/*设置元素上外边距*/
}
.menu li a{
	display:block;/*设置为块级元素*/
	background:orange;/*设置背景颜色*/
	width:120px;/*设置元素宽度*/
	font-size:14px;/*设置文字大小*/
	text-decoration:none;
	color:white;/*设置文字颜色*/
	padding:10px 15px 10px 12px;/*设置内边距*/
	-webkit-border-top-right-radius:10px;/*设置上右圆角边框*/
	-webkit-border-bottom-right-radius:10px;/*设置下右圆角边框*/
	-webkit-transition:padding 0.5s;/*设置过渡效果*/
}
.menu li a:hover{
	background:lightgreen;/*设置背景颜色*/
	color:blue;/*设置文字颜色*/
}
</style>
</head>
<body>
<script type="text/javascript">
function long(){
	event.target.style.paddingLeft="30px";
}
function short(){
	event.target.style.paddingLeft="12px";
}
</script>
<ul class="menu">
	<li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">HTML/CSS讨论区</a></li>
	<li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">JavaScript讨论区</a></li>
	<li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">C语言讨论区</a></li>
	<li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">Java讨论区</a></li>
	<li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">Android讨论区</a></li>
	<li><a href="javascript:void(0)" onMouseOver="long()" onMouseOut="short()">Python讨论区</a></li>
</ul>
</body>
</html>
